﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #dictTable + .layui-table-view .layui-table-tool-temp {
            padding-right: 0;
        }

        #dictTable + .layui-table-view .layui-table-body tbody > tr td {
            cursor: pointer;
        }

        #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
            background-color: #fff3e0;
        }

            #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
                position: absolute;
                right: 6px;
                content: "\e602";
                font-size: 12px;
                font-style: normal;
                font-family: layui-icon !important;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
    </style>
</head>
<body>
    <!-- 主体部分 -->
    <div class="layui-fluid" style="padding-bottom: 0;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding: 10px;">
                        <!-- 表格工具栏1 -->
                        <form class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline" style="max-width: 140px;">
                                    <input name="dictName" class="layui-input" placeholder="输入字典名称" />
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn" lay-filter="dictTbSearch" lay-submit>
                                        <i class="layui-icon">&#xe615;</i>搜索
                                    </button>
                                </div>
                            </div>
                        </form>
                        <!-- 数据表格1 -->
                        <table id="dictTable" lay-filter="dictTable"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding: 10px;">
                        <!-- 表格工具栏2 -->
                        <form class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">字典名称:</label>
                                    <div class="layui-input-inline">
                                        <input name="dictDataName" class="layui-input" placeholder="输入字典名称" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">字典键值:</label>
                                    <div class="layui-input-inline">
                                        <input name="dictDataCode" class="layui-input" placeholder="输入字典键值" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    &emsp;
                                    <button class="layui-btn icon-btn" lay-filter="dictDataTbSearch" lay-submit>
                                        <i class="layui-icon">&#xe615;</i>搜索
                                    </button>
                                </div>
                            </div>
                        </form>
                        <!-- 数据表格2 -->
                        <table id="dictDataTable" lay-filter="dictDataTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 表格操作列 -->
    <script type="text/html" id="toolbar">
        <a id="btnAdd" class="layui-btn layui-btn-sm icon-btn" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a id="btnEdit" class="layui-btn layui-btn-warm layui-btn-sm icon-btn" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a id="btnDelete" class="layui-btn layui-btn-danger layui-btn-sm icon-btn" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>

        // 全局变量
        var table;

        layui.use(['layer', 'form', 'table', 'util', 'admin', 'setter'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            var setter = layui.setter;
            var selObj;  // 左表选中数据

            // 表格初始化
            layuiTableSet(table, setter);

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#dictTable',
                url: setter.baseServer() + '/SystemManage/DataDict/GetListJson',
                height: 'full-100',
                toolbar: "#toolbar",
                defaultToolbar: [],
                cols: [[
                    { type: 'numbers' },
                    { field: 'DictType', title: '字典类型', sort: true },
                    { field: 'Remark', title: '备注', sort: true },
                ]],
                done: function (res, curr, count) {
                    $('#dictTable+.layui-table-view .layui-table-body tbody>tr:first').trigger('click');
                }
            });

            /* 监听行单击事件 */
            table.on('row(dictTable)', function (obj) {
                selObj = obj;
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                insTb2.reload({ where: { DictType: obj.data.DictType }, page: { curr: 1 }, url: setter.baseServer() + '/SystemManage/DataDict/GetDataDictDetailListJson'});
            });

            /* 表格搜索 */
            form.on('submit(TbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格头工具栏点击事件 */
            table.on('toolbar(dictTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel();
                } else if (obj.event === 'edit') { // 修改
                    var checkRows = table.checkStatus('dictTable');
                    if (checkRows.data.length === 0 || checkRows.data.length > 1) {
                        layer.msg('请选择且只选择一条数据', { icon: 2 });
                        return;
                    }
                    showEditModel(checkRows.data[0]);
                } else if (obj.event === 'del') { // 删除
                    doDel(selObj);
                }
            });

            /* 显示表单弹窗 */
            function showEditModel(mData) {
                var id = 0;
                if (mData != undefined && mData != null) { id = mData.Id; }
                admin.open({
                    type: 2,
                    area: ['768px', '600px'],
                    title: (mData ? '修改' : '添加'),
                    content: 'dataDictForm.html?id=' + id,
                });
            }

            /* 删除 */
            function doDel(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req('/SystemManage/DataDict/DeleteFormJson', {
                        ids: obj.data.Id
                    }, function (res) {
                        layer.close(loadIndex);
                        if (1 === res.Tag) {
                            layer.msg("操作成功", { icon: 1 });
                            insTb.reload({ page: { curr: 1 } });
                        } else {
                            layer.msg(res.Message, { icon: 2 });
                        }
                    }, 'post');
                });
            }

            /* 渲染表格2 */
            var insTb2 = table.render({
                elem: '#dictDataTable',
                data: [],
                height: 'full-100',
                page: true,
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>&nbsp;',
                    '</p>'].join(''),
                cellMinWidth: 100,
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'DictValue', title: '字典值', sort: true },
                    { field: 'DictKey', title: '字典键(一般从1开始)', sort: true },
                    { field: 'DictSort', title: '字典排序', sort: true },
                    { field: 'ListClass', title: '显示样式(default primary success info warning danger)', sort: true },
                    { field: 'DictStatus', title: '字典状态(0禁用 1启用)', sort: true },
                    { field: 'IsDefault', title: '默认选中(0不是 1是)', sort: true },
                    { field: 'Remark', title: '备注', sort: true },
                    {
                        field: 'CreateTime', title: '创建时间', templet: function (d) {
                            return util.toDateString(d.CreateTime);
                        }, sort: true
                    },
                    { title: '操作', toolbar: '#dictDataTbBar', align: 'center', width: 120, minWidth: 120 }
                ]]
            });

            /* 表格2搜索 */
            form.on('submit(dictDataTbSearch)', function (data) {
                insTb2.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格2工具条点击事件 */
            table.on('tool(dictDataTable)', function (obj) {
                if (obj.event === 'edit') { // 修改
                    showEditModel2(obj.data);
                } else if (obj.event === 'del') { // 删除
                    doDel2(obj);
                }
            });

            /* 表格2头工具栏点击事件 */
            table.on('toolbar(dictDataTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel2();
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('dictDataTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', { icon: 2 });
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.dictDataId;
                    });
                    doDel2({ ids: ids });
                }
            });

            /* 显示表单弹窗2 */
            function showEditModel2(mData) {
                admin.open({
                    type: 1,
                    title: (mData ? '修改' : '添加') + '数据字典项',
                    content: $('#dictDataEditDialog').html(),
                    success: function (layero, dIndex) {
                        // 回显表单数据
                        form.val('dictDataEditForm', mData);
                        // 表单提交事件
                        form.on('submit(dictDataEditSubmit)', function (data) {
                            data.field.dictId = selObj.data.dictId;
                            var loadIndex = layer.load(2);
                            $.get(mData ? '../../json/ok.json' : '../../json/ok.json', data.field, function (res) {
                                layer.close(loadIndex);
                                if (200 === res.code) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, { icon: 1 });
                                    insTb2.reload({ page: { curr: 1 } });
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            }, 'json');
                            return false;
                        });
                    }
                });
            }

            /* 删除2 */
            function doDel2(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    $.get('../../json/ok.json', {
                        id: obj.data ? obj.data.dictDataId : '',
                        ids: obj.ids ? obj.ids.join(',') : ''
                    }, function (res) {
                        layer.close(loadIndex);
                        if (200 === res.code) {
                            layer.msg(res.msg, { icon: 1 });
                            insTb2.reload({ page: { curr: 1 } });
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    }, 'json');
                });
            }

        });
    </script>
</body>
</html>